<template>
	<view class="page">
		<view class="title">
			<view>您好，欢迎登录党员发展系统！</view>
		</view>
		<view class="form">
			<view class="inputs">
				<view class="account">
					<input type="number" v-model="account" :adjust-position="false" placeholder="账号" />
				</view>
				<view class="password">
					<input :password="!pwdShow" v-model="password" placeholder="密码" />
					<uni-icons :type="pwdShow ? 'eye-slash' : 'eye-slash-filled'" size="24"
						@click="pwdShowChange"></uni-icons>
				</view>
				<view class="forgetPwd"><text @click="forgetPwd">忘记密码？</text></view>
			</view>
			<view class="button">
				<view @click="onLogin">
					登录
				</view>
			</view>
			<view class="tip">
				<text>没有账号？</text>
				<text class="registertext" @click="toRegister">去注册</text>
			</view>
		</view>
		<view class="pact">
			<checkbox :checked="pactChecked" @click="pactChange" />
			<view>我已阅读并同意<text @click="toPact">《用户协议》</text></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		login
	} from '@/common/js/api';

	// 定义响应式数据
	const account = ref("");
	const password = ref("");
	const pwdShow = ref(false);
	const pactChecked = ref(true);


	// 定义登录方法
	const onLogin = () => {
		login(account.value,password.value);
	};

	// 定义忘记密码方法
	const forgetPwd = () => {
		uni.navigateTo({
			url:'/pages/forgetPwd/forgetPwd'
		})
	};

	// 定义跳转注册页面方法
	const toRegister = () => {
		uni.navigateTo({
			url: "/pages/register/register"
		});
	};

	// 定义协议勾选状态切换方法
	const pactChange = () => {
		pactChecked.value = !pactChecked.value;
	};

	// 定义查看协议方法
	const toPact = () => {
		uni.navigateTo({
			url: "/pages/util/user_agreement"
		})
	};

	const pwdShowChange = () => {
		pwdShow.value = !pwdShow.value;
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			padding-top: 500rpx;
			padding-bottom: 120rpx;
			background: url("https://cdn.luogu.com.cn/upload/image_hosting/tenlj1x3.png") no-repeat top center;
			background-size: 100%;

			view {
				padding-left: 64rpx;
				font-size: 44rpx;
				font-weight: 700;
				line-height: 1;
			}
		}

		.form {
			flex: 1;
			padding: 0 64rpx;

			.inputs {
				margin-bottom: 50rpx;

				.account,
				.password {
					height: 96rpx;
					border-radius: 48rpx;
					border: 1rpx solid rgba(204, 204, 204, 1);
					padding: 0 48rpx;
					display: flex;
					align-items: center;

					input {
						flex: 1;
					}
				}

				.account {
					margin-bottom: 48rpx;
				}

				.forgetPwd {
					text-align: right;
					padding: 20rpx 0;
				}
			}

			.button {
				view {
					margin-bottom: 20rpx;
					line-height: 96rpx;
					border-radius: 48rpx;
					text-align: center;
					font-size: 32rpx;
					background: linear-gradient(90deg, rgba(255, 222, 102, 1) 0%, rgba(202, 245, 253, 1) 100%);
				}
			}

			.tip {
				.registertext {
					color: #F4A460;
				}

				font-size: 28rpx;
				text-align: center;
				margin-top: 30rpx;
			}
		}

		.pact {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 70rpx;
			font-size: 24rpx;

			text {
				color: #ffde66;
			}

			checkbox {
				:deep(.uni-checkbox-input) {
					border: 1rpx solid #000000;
				}

				transform:scale(0.6)
			}
		}
	}
</style>